<template>
  <div class="content-box" @mousedown="mousedown( null, $event)" @mousemove.prevent='mousemove(  null, $event)' @mouseup='mouseup(  null, $event)'>
    <div class="left-list">
      <!-- 左边区域 -->
      <div class="header">
        个体报分销设置合同.pdf
      </div>
      <div class="tips">请将控件拖动到文件区域</div>
      <div class="content">
        <div class="list">
          <div class="item" v-for="(item,index) in listModel" :Key="item.id">{{item.label}}{{index}}</div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <div class="right-content-top">
        <el-button @click="fnSave()" type="danger">保存</el-button>
      </div>
      <!-- 右边合同区域 -->
      <md-contract :showBtns="true" :visible="contractVisable" class="md-cont" ref="pdfCanvas">
      </md-contract>
      <!-- canvas 分页div区域 -->
      <div></div>
      <!-- <div class="ipt-box" @mousedown="mousedown(item, $event)" @mousemove.prevent='mousemove( item,$event)' @mouseup='mouseup( item,$event)' v-for="(item,index) in domDiv"
        :style="{zIndex:item.z,width:item.width,height:item.height, fontSize:item.fontSize, left:item.x+'px',top:item.y+'px'}" :key="index">
        {{item}}</div> -->
    </div>
    <!-- 移动样式 -->
    <div class="move-div " v-if="is_moving" :style="{left:move_l+'px',top:move_b+'px'}">
      {{move_l}},
      {{move_b}}
    </div>
  </div>
</template>
<script>
const pdfLeft = 320; //合同距离左边距离
const pdfTop = 60; //合同距离顶部距离
const pdfWidth = 800; //pdf宽
import mdContract from "./contract.md.vue";
export default {
  components: {
    mdContract,
  },
  data() {
    return {
      datas: [],
      contractVisable: false,
      listModel: [
        {
          id: "1212",
          label: "测试字段",
        },
        {
          id: "1212",
          label: "测试字段",
        },
        {
          id: "1212",
          label: "测试字段",
        },
        {
          id: "1212",
          label: "测试字段",
        },
      ],

      move_l: 0,
      move_b: 0,

      is_moving: false, //pdf外拖入pdf中移动
      pdf_moving: false, //pdf中移动

      coffsetX: 0,
      coffsetY: 0,
      selE: null,
    };
  },

  created() {
    setTimeout(() => {
      this.contractVisable = true;
      // console.log(this.$refs.pdfCanvas.pdfH);
    }, 1000);
  },
  methods: {
    fnSave() {
      console.log(this.$refs.pdfCanvas.datas);
    },
    setDatas(datas) {
      this.datas = datas;
      // this.datas = this.datas.filter(function (item) {
      //   return item.keys !== delItem.keys;
      // });
      // this.$refs.pdfCanvas.setDatas(this.datas);
      // // this.$forceUpdate();
      // console.log(this.datas);
    },
    close() {
      this.contractVisable = false;
    },
    mousedown: function (item, event) {
      // 点击鼠标位于当前div的位置
      this.coffsetX = event.offsetX;
      this.coffsetY = event.offsetY;
      // 如果按下的是需要移动的div就修改移动状态纪录位置
      if (event.path[0].className == "item") {
        // 当前点击的div位置
        this.move_l = event.path[0].offsetLeft;
        this.move_b = event.path[0].offsetTop;
        // 可以移动
        this.is_moving = true;
        // 当前点击的div
        this.selE = event.path[0];
      }
    },
    mousemove: function (item, event) {
      // 移动状态 就移动
      if (this.is_moving) {
        this.move_l = parseInt(event.pageX - this.coffsetX);
        this.move_b = parseInt(event.pageY - this.coffsetY);
      }
    },

    mouseup: function (item, e) {
      // console.log(e);
      if (this.is_moving) {
        // pdf
        let pdfCanvas = this.$refs.pdfCanvas;

        const { scrollTop, scrollLeft } = pdfCanvas.$el;
        this.is_moving = false;

        // 进入pdf区域添加
        if (this.move_l > pdfLeft) {
          // 移动后的左边位置 当前位置-左右列表宽度(固定pdfLeft+居中距离)+滚动宽度
          // 居中距离 外框-pdf宽度/2

          // 得到div 离pdf外框左边的距离
          let A_x = this.move_l - pdfLeft;

          // 得到pdf外框离里面的距离
          let A_X_A = (pdfCanvas.$el.clientWidth - pdfCanvas.pdfW) / 2;
          let moveX = parseInt(A_x - (A_X_A < 0 ? 0 : A_X_A) + scrollLeft);
          // 移动后的顶部位置 当前位置-顶部距离+滚动宽度
          let moveY = this.move_b - pdfTop + scrollTop;

          let pageNumber = parseInt(moveY / pdfCanvas.pdfH);

          // 减去页数得到位置
          let dataY = moveY - parseInt(pdfCanvas.pdfH * pageNumber);

          let newItem = {
            type: "input",
            label: this.selE.innerText,
            keys: Date.parse(new Date()),
            options: {
              active: true,
              isResizable: true, //是否允许缩放
              minh: 30, //最小高度
              minw: 50, //最小宽度
              x: moveX, //相对整个pdf的位置 第一次拖动有效
              y: moveY, //相对整个pdf的位置 第一次拖动有效
              // maxH: 30, //最大高度 和最小一样就禁止变高
              z: 99, //层级
              rules: [
                {
                  required: false,
                  message: "必填项",
                },
              ],
            },
            data: {
              y: dataY, //相对每页的y
              x: moveX, //相对每页的x
              page: pageNumber, //页数
              width: this.selE.clientWidth, //宽
              height: this.selE.clientHeight, //高
              fontSize: 16, //字体大小
              color: "", //颜色
              fontFamily: "", //字体
              id: this.selE.attributes.key.value, //id
            },
          };
          // this.datas.push(newItem);
          pdfCanvas.setDatas(newItem);
          this.selE = null;
        }
      }
      if (this.pdf_moving) {
        this.pdf_moving = false;
        this.item.z = 99;
        this.item = null;
      }
    },
  },
};
</script>
<style  scoped>
.right-content-top {
  height: 60px;
  text-align: right;
  display: block;
  line-height: 60px;
  margin-right: 20px;
}
.content-box {
  /* width: 1440px;
  margin: 0 auto; */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}

.left-list {
  width: 320px;
  background: white;
  float: left;
  box-shadow: 1px 1px 1px red;
  height: 100vh;
  display: block;
  padding: 0 20px;
  position: fixed;
  left: 0;
  top: 0;
  box-sizing: border-box;
}
.right-content {
  height: 93vh;
  left: 320px;
  position: absolute;
  right: 300px;
}

.list {
}
.item {
  height: 30px;
  line-height: 30px;
  margin: 10px auto 0;
  border: 1px solid;
  cursor: all-scroll;
  width: 200px;
}
.move-div {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  border: 1px solid;
  width: 200px;
  z-index: 100;
}

.test-box {
  border: 1px solid;
  width: 100px;
  height: 200px;
}

.md-cont {
  /* height: 100%; */
  top: 60px;
  float: left;
  overflow-x: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>